@{
    ViewBag.Title = "Mailbox";
}
<h3>MailBox</h3>
<div class="table-grid table-grid-desktop">
    <div class="col col-md">
        <div class="pr">
            <div class="clearfix mb">
                <button type="button" data-toggle="collapse" data-target=".mb-boxes" class="btn btn-sm btn-default mb-toggle-button pull-right dropdown-toggle">
                    <em class="fa fa-bars fa-fw fa-lg"></em>
                </button>
                <a href="#" class="btn btn-purple btn-sm mb-compose-button">
                    <em class="fa fa-pencil"></em>
                    <span>Compose</span>
                </a>
            </div>
            <!-- START mailbox list-->
            <div class="mb-boxes collapse">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <ul class="nav nav-pills nav-stacked">
                            <li class="p">
                                <small class="text-muted">MAILBOXES</small>
                            </li>
                            <li class="active">
                                <a href="#">
                                    <span class="label label-green pull-right">42</span>
                                    <em class="fa fa-fw fa-lg fa-inbox"></em>
                                    <span>Inbox</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-green pull-right">10</span>
                                    <em class="fa fa-fw fa-lg fa-star"></em>
                                    <span>Starred</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-green pull-right">0</span>
                                    <em class="fa fa-fw fa-lg fa-paper-plane-o"></em>
                                    <span>Sent</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-green pull-right">5</span>
                                    <em class="fa fa-fw fa-lg fa-edit"></em>
                                    <span>Draft</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-green pull-right">0</span>
                                    <em class="fa fa-fw fa-lg fa-trash"></em>
                                    <span>Trash</span>
                                </a>
                            </li>
                            <li class="p">
                                <small class="text-muted">LABELS</small>
                            </li>
                            <li class="p-h">
                                <a href="#" class="pv-sm">
                                    <span class="circle circle-danger"></span>
                                    <span>Red</span>
                                </a>
                            </li>
                            <li class="p-h">
                                <a href="#" class="pv-sm">
                                    <span class="circle circle-pink"></span>
                                    <span>Pink</span>
                                </a>
                            </li>
                            <li class="p-h">
                                <a href="#" class="pv-sm">
                                    <span class="circle circle-info"></span>
                                    <span>Blue</span>
                                </a>
                            </li>
                            <li class="p-h">
                                <a href="#" class="pv-sm">
                                    <span class="circle circle-warning"></span>
                                    <span>Yellow</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- END mailbox list-->
        </div>
    </div>
    <div class="col">
        <!-- START action buttons-->
        <div class="clearfix mb">
            <div class="btn-group pull-left">
                <button type="button" class="btn btn-default btn-sm">
                    <em class="fa fa-mail-reply text-gray-dark"></em>
                </button>
                <button type="button" class="btn btn-default btn-sm">
                    <em class="fa fa-mail-reply-all text-gray-dark"></em>
                </button>
                <button type="button" class="btn btn-default btn-sm">
                    <em class="fa fa-mail-forward text-gray-dark"></em>
                </button>
            </div>
            <div class="btn-group pull-right">
                <button type="button" class="btn btn-default btn-sm">
                    <em class="fa fa-exclamation text-gray-dark"></em>
                </button>
                <button type="button" class="btn btn-default btn-sm">
                    <em class="fa fa-times text-gray-dark"></em>
                </button>
            </div>
        </div>
        <!-- END action buttons-->
        <div class="panel panel-default">
            <div class="panel-body">
                <!-- p.lead.text-centerNo mails here-->
                <table class="table table-hover mb-mails">
                    <tbody>
                        <!-- ngRepeat: mail in mails | filter:folder-->
                        <tr>
                            <td>
                                <div class="checkbox c-checkbox">
                                    <label>
                                        <input type="checkbox" />
                                        <span class="fa fa-check"></span>
                                    </label>
                                </div>
                            </td>
                            <td class="text-center">
                                <em class="fa fa-lg fa-star-o text-muted"></em>
                            </td>
                            <td>
                                <img alt="Mail Avatar" src="~/Content/Images/user/01.jpg" class="mb-mail-avatar pull-left" />
                                <div class="mb-mail-date pull-right">10 minutes ago</div>
                                <div class="mb-mail-meta">
                                    <div class="pull-left">
                                        <div class="mb-mail-subject">Admin web application</div>
                                        <div class="mb-mail-from">Evelyn Holmes</div>
                                    </div>
                                    <div class="mb-mail-preview">Fusce gravida, diam ac adipiscing pretium, sem nibh bibendum diam, non consequat quam metus non nunc</div>
                                </div>
                            </td>
                        </tr>
                        <!-- end ngRepeat: mail in mails | filter:folder-->
                        <tr>
                            <td>
                                <div class="checkbox c-checkbox">
                                    <label>
                                        <input type="checkbox" />
                                        <span class="fa fa-check"></span>
                                    </label>
                                </div>
                            </td>
                            <td class="text-center">
                                <em class="fa fa-lg fa-star-o text-muted"></em>
                            </td>
                            <td>
                                <img alt="Mail Avatar" src="~/Content/Images/user/02.jpg" class="mb-mail-avatar pull-left" />
                                <div class="mb-mail-date pull-right">1 day ago</div>
                                <div class="mb-mail-meta">
                                    <div class="pull-left">
                                        <div class="mb-mail-subject">Admin theme based on Bootstrap and AngularJS</div>
                                        <div class="mb-mail-from">Allison Grant</div>
                                    </div>
                                    <div class="mb-mail-preview">
                                        Nunc eget lacinia felis. <b>Pellentesque sollicitudin sollicitudin erat, in imperdiet tortor fringil</b>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <!-- end ngRepeat: mail in mails | filter:folder-->
                        <tr>
                            <td>
                                <div class="checkbox c-checkbox">
                                    <label>
                                        <input type="checkbox" />
                                        <span class="fa fa-check"></span>
                                    </label>
                                </div>
                            </td>
                            <td class="text-center">
                                <em class="fa fa-lg fa-star-o text-muted"></em>
                            </td>
                            <td>
                                <img alt="Mail Avatar" src="~/Content/Images/user/03.jpg" class="mb-mail-avatar pull-left" />
                                <div class="mb-mail-date pull-right">2 days ago</div>
                                <div class="mb-mail-meta">
                                    <div class="pull-left">
                                        <div class="mb-mail-subject">Nested route mailbox application</div>
                                        <div class="mb-mail-from">Daryl Carlson</div>
                                    </div>
                                    <div class="mb-mail-preview">
                                        Nulla
                                        <strong>facilisi</strong>. Sed sit amet sem vel purus pulvinar venenatis. Class aptent taciti
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <!-- end ngRepeat: mail in mails | filter:folder-->
                        <tr>
                            <td>
                                <div class="checkbox c-checkbox">
                                    <label>
                                        <input type="checkbox" />
                                        <span class="fa fa-check"></span>
                                    </label>
                                </div>
                            </td>
                            <td class="text-center">
                                <em class="fa fa-lg fa-star-o text-muted"></em>
                            </td>
                            <td>
                                <img alt="Mail Avatar" src="~/Content/Images/user/04.jpg" class="mb-mail-avatar pull-left" />
                                <div class="mb-mail-date pull-right">3 days ago</div>
                                <div class="mb-mail-meta">
                                    <div class="pull-left">
                                        <div class="mb-mail-subject">Angular with lazy load components</div>
                                        <div class="mb-mail-from">George Clark</div>
                                    </div>
                                    <div class="mb-mail-preview">Integer sit amet vulputate mauris. Proin purus nisl, tempor ut tempor at, ornare vel mauris. Ut ac l</div>
                                </div>
                            </td>
                        </tr>
                        <!-- end ngRepeat: mail in mails | filter:folder-->
                        <tr>
                            <td>
                                <div class="checkbox c-checkbox">
                                    <label>
                                        <input type="checkbox" />
                                        <span class="fa fa-check"></span>
                                    </label>
                                </div>
                            </td>
                            <td class="text-center">
                                <em class="fa fa-lg fa-star text-warning"></em>
                            </td>
                            <td>
                                <img alt="Mail Avatar" src="~/Content/Images/user/05.jpg" class="mb-mail-avatar pull-left" />
                                <div class="mb-mail-date pull-right">4 days ago</div>
                                <div class="mb-mail-meta">
                                    <div class="pull-left">
                                        <div class="mb-mail-subject">Translation ready and RTL support!</div>
                                        <div class="mb-mail-from">Bonnie Bowman</div>
                                    </div>
                                    <div class="mb-mail-preview">Integer sit amet vulputate mauris. Proin purus nisl, tempor ut tempor at, ornare vel mauris. Ut ac l</div>
                                </div>
                            </td>
                        </tr>
                        <!-- end ngRepeat: mail in mails | filter:folder-->
                        <tr>
                            <td>
                                <div class="checkbox c-checkbox">
                                    <label>
                                        <input type="checkbox" />
                                        <span class="fa fa-check"></span>
                                    </label>
                                </div>
                            </td>
                            <td class="text-center">
                                <em class="fa fa-lg fa-star-o text-muted"></em>
                            </td>
                            <td>
                                <img alt="Mail Avatar" src="~/Content/Images/user/06.jpg" class="mb-mail-avatar pull-left" />
                                <div class="mb-mail-date pull-right">5 days ago</div>
                                <div class="mb-mail-meta">
                                    <div class="pull-left">
                                        <div class="mb-mail-subject">Don&apos;t forget to check latest updates!</div>
                                        <div class="mb-mail-from">Warren Watts</div>
                                    </div>
                                    <div class="mb-mail-preview">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In at conseq</div>
                                </div>
                            </td>
                        </tr>
                        <!-- end ngRepeat: mail in mails | filter:folder-->
                        <tr>
                            <td>
                                <div class="checkbox c-checkbox">
                                    <label>
                                        <input type="checkbox" />
                                        <span class="fa fa-check"></span>
                                    </label>
                                </div>
                            </td>
                            <td class="text-center">
                                <em class="fa fa-lg fa-star text-warning"></em>
                            </td>
                            <td>
                                <img alt="Mail Avatar" src="~/Content/Images/user/07.jpg" class="mb-mail-avatar pull-left" />
                                <div class="mb-mail-date pull-right">6 days ago</div>
                                <div class="mb-mail-meta">
                                    <div class="pull-left">
                                        <div class="mb-mail-subject">We have to meet someday</div>
                                        <div class="mb-mail-from">Elijah Ward</div>
                                    </div>
                                    <div class="mb-mail-preview">Nunc hendrerit, neque ullamcorper eleifend ornare, arcu est bibendum ipsum, id malesuada sem justo v</div>
                                </div>
                            </td>
                        </tr>
                        <!-- end ngRepeat: mail in mails | filter:folder-->
                        <tr>
                            <td>
                                <div class="checkbox c-checkbox">
                                    <label>
                                        <input type="checkbox" />
                                        <span class="fa fa-check"></span>
                                    </label>
                                </div>
                            </td>
                            <td class="text-center">
                                <em class="fa fa-lg fa-star text-warning"></em>
                            </td>
                            <td>
                                <img alt="Mail Avatar" src="~/Content/Images/user/08.jpg" class="mb-mail-avatar pull-left" />
                                <div class="mb-mail-date pull-right">7 days ago</div>
                                <div class="mb-mail-meta">
                                    <div class="pull-left">
                                        <div class="mb-mail-subject">New issue found</div>
                                        <div class="mb-mail-from">Colleen Payne</div>
                                    </div>
                                    <div class="mb-mail-preview">Integer sit amet vulputate mauris. Proin purus nisl, tempor ut tempor at, ornare vel mauris. Ut ac l</div>
                                </div>
                            </td>
                        </tr>
                        <!-- end ngRepeat: mail in mails | filter:folder-->
                        <tr>
                            <td>
                                <div class="checkbox c-checkbox">
                                    <label>
                                        <input type="checkbox" />
                                        <span class="fa fa-check"></span>
                                    </label>
                                </div>
                            </td>
                            <td class="text-center">
                                <em class="fa fa-lg fa-star-o text-muted"></em>
                            </td>
                            <td>
                                <img alt="Mail Avatar" src="~/Content/Images/user/09.jpg" class="mb-mail-avatar pull-left" />
                                <div class="mb-mail-date pull-right">8 days ago</div>
                                <div class="mb-mail-meta">
                                    <div class="pull-left">
                                        <div class="mb-mail-subject">Issue #5478 awaiting reply</div>
                                        <div class="mb-mail-from">Rose Fox</div>
                                    </div>
                                    <div class="mb-mail-preview">Sed eu felis nulla. Nunc malesuada sapien at risus eleifend ut lacinia sem pretium.</div>
                                </div>
                            </td>
                        </tr>
                        <!-- end ngRepeat: mail in mails | filter:folder-->
                        <tr>
                            <td>
                                <div class="checkbox c-checkbox">
                                    <label>
                                        <input type="checkbox" />
                                        <span class="fa fa-check"></span>
                                    </label>
                                </div>
                            </td>
                            <td class="text-center">
                                <em class="fa fa-lg fa-star text-warning"></em>
                            </td>
                            <td>
                                <img alt="Mail Avatar" src="~/Content/Images/user/10.jpg" class="mb-mail-avatar pull-left" />
                                <div class="mb-mail-date pull-right">9 days ago</div>
                                <div class="mb-mail-meta">
                                    <div class="pull-left">
                                        <div class="mb-mail-subject">Check Angle for your next startup project</div>
                                        <div class="mb-mail-from">Jenny Knight</div>
                                    </div>
                                    <div class="mb-mail-preview">Morbi varius sem quis purus suscipit tempus. Integer fermentum accumsan metus, id sagittis ipsum mol</div>
                                </div>
                            </td>
                        </tr>
                        <!-- end ngRepeat: mail in mails | filter:folder-->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@section Styles {

}
@section Scripts {

}
